<template>
    <div>
        <div class="table">
            <span>报警联动</span>
            <span style="margin-left: 6.5rem;cursor: pointer;" @click="close">×</span>
            <!-- 姓名 性别  手机  地址  渔船号 类型 -->
            <p>
                <span>位置信息</span>
                <span>事件类型</span>
                <!-- <span>事件分级</span> -->
                <span>处置信息</span>
                <span>处置选项</span>
                <span>事件时间</span>
            </p>
            <div style="height:150px;overflow-y: scroll;">
                <table>
                    <tr v-for="item in callpoliceList" :key="item.id">
                        <td style="line-height: 20px;">{{ item.number }}</td>
                        <td>徘徊报警</td>
                        <td>{{ item.type == 1 ? '已确认' : '未确认' }}</td>
                        <td style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                            <button class="btn_u" ref="btn_u1" @click="disposeof(item.id)">确认</button>
                        </td>
                        <td>
                            {{ new Date().toLocaleDateString() }}
                        </td>
                    </tr>
                </table>
                <!-- <div>
                    无报警信息
                </div> -->
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import kang from "../common/mitt.js"
import { ElMessage } from 'element-plus'
import http from "axios"
// let pid = sessionStorage.getItem('camera')
let text = ref('未处置')
let btn_u1 = ref()
let callpoliceList = ref([])
let emits = defineEmits(['setFlight'])
const close = () => {
    kang.emit('vPolice', false)
}
const disposeof = (id: any) => {
    // 处置报警联动
    // text.value = '已处置'
    // btn_u1.value.style.backgroundColor = 'green'
    // console.log(id)
    http({
        method: "post",
        url: `/sinlogin/userManage/updatebj`,
        params: {
            id: id,
        },
        baseURL: "abs",
    })
        .then((response) => {
            // console.log("修改成功", response);
            ajaxlist()//重新调用
            // 关闭视频，重置默认飞行窗口
            kang.emit('vBall',false)
            emits('setFlight','cs')
        })
        .catch((error) => {
            console.log("修改失败", error);
        });
    // ajax()
    // console.log(pid);
}
let ajax = () => {
    // sessionStorage.setItem('camera', '1')
    http({
        method: "post",
        url: `/sinlogin/userManage/updbaojing`,
        // params: {
        //     username: "admin",
        //     password: "6aa6e7d0dba1b0b3e7d83ee44d5d255b",
        // },
        baseURL: "abs",
    })
        .then((response) => {
            console.log("处置成功", response, response.data);
            ElMessage({
                message: '处置成功',
                type: 'success',
            })
            sessionStorage.setItem('camera', '0')
            // sessionStorage.removeItem('camera')
        })
        .catch((error) => {
            console.log("处置失败", error);
        });


};
let ajaxlist = () => {
    // sessionStorage.setItem('camera', '1')
    http({
        method: "post",
        url: `/sinlogin/userManage/selectbj`,
        // params: {
        //     username: "admin",
        //     password: "6aa6e7d0dba1b0b3e7d83ee44d5d255b",
        // },
        baseURL: "abs",
    })
        .then((response) => {
            console.log("收到成功", response);
            callpoliceList.value = response.data.splice(0, 5)
            response.data.splice(0, 5).map((item: any, index: any) => {
                // console.log(item);
                switch (item.number) {
                    case 1:
                        callpoliceList.value[index].number = '熏华中路'
                        break;
                    case 2:
                        callpoliceList.value[index].number = '滨湖路'
                        break;
                    case 3:
                        callpoliceList.value[index].number = '西北停车场'
                        break;
                    case 4:
                        callpoliceList.value[index].number = '滨河大道桥'
                        break;
                    case 5:
                        callpoliceList.value[index].number = '北停车场'
                        break;
                    case 6:
                        callpoliceList.value[index].number = '图书馆'
                        break;
                    case 7:
                        callpoliceList.value[index].number = '滨湖大道中'
                        break;
                    case 8:
                        callpoliceList.value[index].number = '昭亭南路南'
                        break;
                    case 9:
                        callpoliceList.value[index].number = '滨湖路口'
                        break;
                    default:
                        callpoliceList.value[index].number = '未知'
                }
                // console.log(callpoliceList.value);
            })
        })
        .catch((error) => {
            console.log("收到失败", error);
        });
};

onMounted(() => {
    ajaxlist()
    // console.log(callpoliceList);

})
</script>
<style scoped>
.table {
    width: 9rem;
    height: 3.75rem;
    background-image: url('../assets/img/tabel.png');
    background-size: 9rem 3.75rem;
    background-repeat: no-repeat;
    /* overflow: hidden; */
}

.table>span {
    margin-left: 1.0125rem;
    line-height: .45rem;
    color: #fff;
    font-size: .225rem;
}

.table p {
    font-size: .225rem;
    color: #fff;
    margin: .375rem 0px;
}

.table .btn_u {
    cursor: pointer;
    width: .8rem;
    height: .3rem;
    border-radius: 10px;
    background-color: rgb(18, 228, 53);
}

.table p span:nth-child(1) {
    margin-left: .425rem;
}

.table p span:nth-child(2) {
    margin-left: .675rem;
}

.table p span:nth-child(3) {
    margin-left: .825rem;
}

.table p span:nth-child(4) {
    margin-left: .7rem;
}

.table p span:nth-child(5) {
    margin-left: .75rem;
}

/* .table p span:nth-child(6) {
    margin-left: .875rem;
} */
.table table tr td:nth-child(1) {
    width: 1.625rem;
}

.table table tr td:nth-child(2) {
    width: 1.725rem;
}

.table table tr td:nth-child(3) {
    width: 1.725rem;
}

.table table tr td:nth-child(4) {
    width: 1.525rem;
}

table {
    margin-left: .375rem;
    /* margin-top: -10px; */
    font-size: 16px;
    color: #a5a5a5;
    cursor: pointer;

}

::-webkit-scrollbar {
    display: none;
}


/* table td {} */
</style>